// 表单验证
// 获取元素
let testCont = document.querySelectorAll('.username input')//内容
// console.log(testCont);
let contBtn = document.querySelectorAll('.alert img')//图片
// console.log(contBtn); 
let userTest = document.querySelectorAll('.user-test')//提示信息
// console.log(userTest);
let argeeCheckbox = document.querySelector('.checked')//接受提示框
let regBtn = document.querySelector('.reg-btn')//立即注册

/* 需求1： 输入用户名手机号密码 验证码验证内容是否大于0，显示背景图 .username img clearInput.png 否则隐藏*/

// 用户名

testCont[0].addEventListener('input', function () {
    // console.log(1);
    if (testCont[0].value > 0) {
        // console.log(1);
        contBtn[0].style.display = 'block' //显示
    } else {
        // console.log(2);
        contBtn[0].style.display = 'none' //隐藏 
    }
})
// 点击用户名图标 清空内容
contBtn[0].addEventListener('click', function () {
    testCont[0].value = ''
})
//手机号
testCont[1].addEventListener('input', function () {
    // console.log(1);
    if (testCont[1].value > 0) {
        // console.log(1);
        contBtn[1].style.display = 'block' //显示
    } else {
        // console.log(2);
        contBtn[1].style.display = 'none' //隐藏 
    }
})
// 点击密码图标 清空内容
contBtn[1].addEventListener('click', function () {
    testCont[1].value = ''
})
//手机短信验证
testCont[2].addEventListener('input', function () {
    // console.log(1);
    if (testCont[2].value > 0) {
        // console.log(1);
        contBtn[2].style.display = 'block' //显示
    } else {
        // console.log(2);
        contBtn[2].style.display = 'none' //隐藏 
    }
})
// 点击手机短信图标 清空内容
contBtn[2].addEventListener('click', function () {
    testCont[2].value = ''
})
//密码
testCont[3].addEventListener('input', function () {
    // console.log(1);
    if (testCont[3].value > 0) {
        // console.log(1);
        contBtn[3].style.display = 'block' //显示
    } else {
        // console.log(2);
        contBtn[3].style.display = 'none' //隐藏 
    }
})
// 点击密码图标 清空内容
contBtn[3].addEventListener('click', function () {
    testCont[3].value = ''
})


/* 定义正则表达式 */
//用户名正则，4到20位（字母，数字，下划线，减号）
var uPattern = /^[a-zA-Z0-9_-]{4,20}$/;
//验证手机号码是否合法
let userReg = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
//手机短信四位数
let tellMsg = /\d{4}/
//创建密码验证——正则表达式
let pwdReg = /^[0-9]{6}$/ //6位数字


/*
 用户名失去焦点时 blur，验证用户名是否合适 //使用正则表达式
*/
testCont[0].addEventListener('blur', function () {
    //用 uPattern 验证手机号是否合法
    let bool = uPattern.test(testCont[0].value)
    //console.log(bool);
    if (bool) {
        //提示内容为空
        userTest[0].style.display = 'none';
    } else {
        //提示内容为 
        userTest[0].style.display = 'block';
    }
})

/*
     手机号失去焦点时 blur，验证手机号是否合适 //使用正则表达式
 */
testCont[1].addEventListener('blur', function () {
    //用 userReg 验证手机号是否合法
    let bool = userReg.test(testCont[1].value)
    //console.log(bool);
    if (bool) {
        //提示内容为空
        userTest[1].style.display = 'none';
    } else {
        //提示内容为 
        userTest[1].style.display = 'block';
    }
})
/*
     手机短信失去焦点时 blur，验证手机号是否合适 //使用正则表达式
 */
     testCont[2].addEventListener('blur', function () {
        //用 tellMsg 验证手机号是否合法
        let bool = tellMsg.test(testCont[2].value)
        //console.log(bool);
        if (bool) {
            //提示内容为空
            userTest[2].style.display = 'none';
        } else {
            //提示内容为 
            userTest[2].style.display = 'block';
        }
    })

/*
    密码失去焦点时 blur，验证手机号是否合适 //使用正则表达式
 */
     testCont[3].addEventListener('blur', function () {
        //用 userReg 验证手机号是否合法
        let bool = pwdReg.test(testCont[3].value)
        //console.log(bool);
        if (bool) {
            //提示内容为空
            userTest[3].style.display = 'none';
        } else {
            //提示内容为 
            userTest[3].style.display = 'block';
        }
    })

// 点击接受框 argeeChkbox 将立即注册的背景色设置成蓝色，文字颜色设置成白色
argeeCheckbox.addEventListener('change',function(){
    // console.log(1);
    if(argeeCheckbox.checked){
        regBtn.style.backgroundColor = '#00bdff';
        regBtn.style.color = '#fff';
    }else{
        regBtn.style.backgroundColor = '#e5e8ec';
        regBtn.style.color = '#4b4b4b';
    }
})

    

